<template>
    <div class="main">
        <div class="top">
            <div class="leff">
                <div class="leff-top"><a href="https://ddzs.scvtc.edu.cn/">单独招生报名入口</a>
                    <img src="https://www.scvtc.edu.cn/images/icon-enter.png" style="height:33px;width:33px;margin-left:10px">
                </div>
                <div class="leff-bottom">
                    <img src="https://www.scvtc.edu.cn/images/tit-icon4.png" style="height:33px;width:35px;margin-right:10px">
                      快速导航
                </div>
            </div>
            <img src="https://www.scvtc.edu.cn/images/s2-rrt.png" class="rightt">
        </div>
        <div class="bottom">

            <el-col :span="4"  v-for="item in titlelist" style="margin:20px;">
                <el-card shadow="hover">
                    <a :href="item.hr">
                     {{item.title}} 
                      </a>
                </el-card>
              </el-col>

        </div>
    </div>
</template>

<script setup lang="ts">
const titlelist=[
    {title:'招生信息网',hr:'https://zsc.scvtc.edu.cn/'},
{title:'川职易班',hr:'https://www.yiban.cn/school/index/id/22077'},
{title:'素质训育平台',hr:'http://sczyxy.fanya.chaoxing.com/portal'},
{title:'教师管理平台',hr:'http://jiaoshi.scedu.net/'},
{title:'数据平台',hr:'http://sjpt.scvtc.edu.cn/'},
{title:'目标管理平台',hr:'https://zlzg.scvtc.edu.cn/#/login?from=%2F'},
{title:'课程思政',hr:'https://zt.scvtc.edu.cn/kcszsbwz.htm'},
{title:'双高绩效平台',hr:'https://sgjxgl.scvtc.edu.cn/jxglwebsgxt/login.html'},
{title:'后勤报修',hr:'https://hqbx.scvtc.edu.cn/'},
{title:'校报在线',hr:'http://sczyjsxy.ihwrm.com/'},
{title:'就业登记系统',hr:'https://wq.ncss.cn/'},
{title:'乡村振兴网',hr:'https://fpzw.scvtc.edu.cn/'}
];
</script>

<style scoped lang="scss">
.main{
    display: flex;
    flex-direction: column;
    margin-top: 130px;
    .top{
        display: flex;
        height: 180px;
        .leff{
            
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .leff-top{
                width: 300px;
                height: 45px;
                font-size: 25px;
                display: flex;
                align-items: center;
                color: red;
                font-weight: bolder;
            }
            .leff-top:hover{
                color: rgb(205, 42, 205);
            }
            .leff-bottom{
                font-size: 30px;
                font-weight: bolder;
                display: flex;
                align-items: center;
            }
        }
        .rightt{
            position: absolute;
            top: 2080px;
            right: 50px;
            height: 300rpx;
            width: 300rpx;

        }

    }
    .bottom{
        margin-top: 50px;
        display: flex;
        flex-wrap: wrap;
        margin-left: -20px;
    }
}
</style>